/**         .----.
*       _.'__    `.
*   .--($)($$)---/#\
* .' @          /###\
* :         ,   #####
*  `-..__.-' _.-\###/
*        `;_:    `"'
*      .'"""""`.
*     /,     ,\\
*    //  !BUG  \\
*    `-._______.-'
*    ___`. | .'___
*   (______|______)
*
* 单选框跟复选框美化-JS
* @author kwun
* @email 527565073@qq.com
*/

(function( $ ){

    $.fn.pretty = function( options ){
        var settings = $.extend({
            version:'1.0.0',
            inputClass: "pretty",
            label: true,
            separator: "|",
            checked_label: "Checked",
            unchecked_label: "Unchecked",
            minimum_width: false,
            same_width: true
        }, options);

        return this.each(function(){

            var $object = $( this );
            var use_labels = true;
            var labels;
            var labels_object;
            var input_id;

            if( $object.is( ":checkbox" ) === false && $object.is( ":radio" ) === false )
                return this;

            $object.addClass( settings.inputClass );
            labels = $object.attr( "data-pretty" );
            use_labels = settings.label;
            if( use_labels === true ){
                if( labels == null || labels.length === 0 ){
                    labels_object = new Array();
                    labels_object[0] = settings.unchecked_label;
                    labels_object[1] = settings.checked_label;
                }
                else{
                    labels_object = labels.split( settings.separator );
                    if( labels_object.length > 2 ){
                        use_labels = false;
                    }
                }
            }

            $object.css({ display : "none" });
            $object.removeAttr( "data-pretty" );
            
            input_id = $object.attr( "id" );
            if( input_id == null )
            {
                var input_id_number = 1 + Math.floor( Math.random() * 1024000 );
                input_id = "pretty-" + input_id_number;

                while( $( input_id ).length !== 0 )
                {
                    input_id_number++;
                    input_id = "pretty-" + input_id_number;
                }

                $object.attr( "id", input_id );
            }

            $object.after( create( input_id, labels_object, use_labels ) );
            if( settings.minimum_width !== false )
                $object.next( "label[for=" + input_id + "]" ).css({ "min-width": settings.minimum_width });

            if( settings.same_width != false && settings.label == true )
            {
                var label_object = $object.next( "label[for=" + input_id + "]" );
                var unchecked_width = getRealWidth(label_object.find( "span.pretty-unchecked" ));
                var checked_width = getRealWidth(label_object.find( "span.pretty-checked" ));

                if( unchecked_width > checked_width )
                    label_object.find( "span.pretty-checked" ).width( unchecked_width );
                else
                    label_object.find( "span.pretty-unchecked" ).width( checked_width );
            }

            $object.next('label').bind('click',function(){
                $object.click();
            })

        });
    };

    function getRealWidth( element )
    {
        var width = 0;
        var $target = element;
        var style = 'position: absolute !important; top: -1000 !important; ';

        $target = $target.clone().attr('style', style).appendTo('body');
        width = $target.width(true);
        $target.remove();

        return width;
    }

    function create( input_id, messages_object, label )
    {
        var block;
        var unchecked_message;
        var checked_message;

        if( messages_object == null )
            unchecked_message = checked_message = "";
        else
        {
            unchecked_message = messages_object[0];

            // If checked message is null, then put the same text of unchecked message
            if( messages_object[1] == null )
                checked_message = unchecked_message;
            else
                checked_message = messages_object[1];
        }

        if( label == true )
        {
            block = '<label for="' + input_id + '">' +
                        '<span class="pretty-unchecked-image"></span>' +
                        '<span class="pretty-unchecked">' + unchecked_message + '</span>' +
                        '<span class="pretty-checked-image"></span>' +
                        '<span class="pretty-checked">' + checked_message + '</span>' +
                    '</label>';
        }
        else
        {
            block = '<label for="' + input_id + '">' +
                        '<span class="pretty-unchecked-image"></span>' +
                        '<span class="pretty-checked-image"></span>' +
                    '</label>';
        }

        return block;
    };

}( jQuery ));